<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边颜色设置为红色
      ctx.fillStyle = '#00f' // 填充颜色设置为蓝色
      ctx.lineWidth = 5

      // 绘制一个矩形
      ctx.rect(50, 50, 100, 100)
      ctx.stroke()

      ctx.beginPath()

      // 填充一个矩形
      ctx.rect(200, 200, 100, 100)
      ctx.fill()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边颜色设置为红色
      ctx.fillStyle = '#00f' // 填充颜色设置为蓝色
      ctx.lineWidth = 5

      // 先创建矩形的路径，再描边矩形
      ctx.rect(50, 50, 100, 100)
      ctx.stroke()

      ctx.beginPath()

      // 直接创建矩形路径并描边
      ctx.strokeRect(50, 200, 100, 100)
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边颜色设置为红色
      ctx.fillStyle = '#00f' // 填充颜色设置为蓝色
      ctx.lineWidth = 5

      // 先创建矩形路径，再描边矩形
      ctx.rect(50, 50, 100, 100)
      ctx.fill()

      ctx.beginPath()

      // 直接创建矩形路径并描边
      ctx.fillRect(50, 200, 100, 100)
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边颜色设置为红色
      ctx.fillStyle = '#00f' // 填充颜色设置为蓝色
      ctx.lineWidth = 5

      // 顺时针绘制一段 90 度的圆弧
      ctx.arc(100, 110, 50, 0, (90 * Math.PI) / 180)
      ctx.stroke()

      ctx.beginPath()

      // 逆时针绘制一段 90 度的圆弧
      ctx.arc(300, 100, 50, 0, (90 * Math.PI) / 180, true)
      ctx.stroke()

      ctx.beginPath()

      // 顺时针填充一段 90 度的圆弧
      ctx.arc(100, 300, 50, 0, (90 * Math.PI) / 180)
      ctx.fill()

      ctx.beginPath()

      // 逆时针填充一段 90 度的圆弧
      ctx.arc(300, 300, 50, 0, (90 * Math.PI) / 180, true)
      ctx.fill()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边颜色设置为红色
      ctx.fillStyle = '#00f' // 填充颜色设置为蓝色
      ctx.lineWidth = 5

      // 顺时针绘制一段 360 度的 圆弧
      ctx.arc(100, 100, 50, 0, (360 * Math.PI) / 180)
      ctx.stroke()

      ctx.beginPath()

      // 逆时针绘制一段 360 度的圆弧
      ctx.arc(300, 300, 50, 0, (360 * Math.PI) / 180)
      ctx.fill()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 给画布增加一个阴影和圆角的样式 */
      canvas {
        box-shadow: 0px 0px 5px #ccc;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas

      // 通过判断 getContext 方法手否存在来判断浏览器的支持性
      if (canvas.getContext) {
        // 获取绘图上下文
        var ctx = canvas.getContext('2d')
        ctx.beginPath()

        ctx.ellipse(100, 150, 50, 100, 0, 0, 2 * Math.PI)
        ctx.stroke()

        ctx.beginPath()

        ctx.ellipse(400, 150, 50, 100, 0, 0, 2 * Math.PI)
        ctx.stroke()

        ctx.beginPath()

        ctx.ellipse(250, 350, 50, 100, Math.PI / 2, 0, 2 * Math.PI) // 旋转90°
        ctx.fill()
      }
    </script>
  </body>
</html> -->

<!-- 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#333'

      ctx.beginPath()
      ctx.moveTo(100, 250)
      ctx.quadraticCurveTo(250, 100, 400, 250)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取 Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.lineWidth = 6
      ctx.strokeStyle = '#333'

      ctx.beginPath()
      ctx.moveTo(100, 250)
      ctx.bezierCurveTo(150, 100, 350, 100, 400, 250)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas - 圆弧</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ;(ctx.lineWidth = 5),
        // 顺时针绘制一段90度的圆弧
        ctx.arc(100, 100, 50, 0, (90 * Math.PI) / 180)
      ctx.stroke()

      // 逆时针绘制一段90度的圆弧
      // ctx.beginPath();
      ctx.arc(300, 100, 50, 0, (90 * Math.PI) / 180, true)
      ctx.stroke()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas - 圆弧</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ctx.lineWidth = 5

      // 顺时针绘制一段 90度 的圆弧
      ctx.beginPath()
      ctx.arc(100, 100, 50, 0, (90 * Math.PI) / 180)
      ctx.stroke()
      ctx.closePath()

      // 逆时针绘制一段 90度 的圆弧
      ctx.beginPath()
      ctx.arc(300, 100, 50, 0, (90 * Math.PI) / 180, true)
      ctx.stroke()
      ctx.closePath()
    </script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas - 圆弧</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ctx.lineWidth = 5

      // 绘制一个矩形边框
      ctx.beginPath()
      ctx.strokeStyle = 'rgba(255,0,0,0.7)' // 指定透明度的描边样式
      ctx.strokeRect(10, 10, 100, 100)

      // 绘制一个矩形
      ctx.beginPath()
      ctx.fillStyle = 'rgba(0,0,255,0.2)' // 指定透明度的填充样式
      ctx.fillRect(10, 90, 100, 100)

      // 绘制一个圆
      ctx.beginPath()
      ctx.fillStyle = 'rgba(255,255,0,1)'
      ctx.globalAlpha = 0.5 // 设置透明度
      ctx.arc(200, 200, 100, 0, Math.PI * 2, true)
      ctx.fill()
    </script>
  </body>
</html> -->

<!-- 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ctx.lineWidth = 5

      // 创建渐变
      var gradient1 = ctx.createLinearGradient(10, 10, 400, 10)
      gradient1.addColorStop(0, '#000000')
      gradient1.addColorStop(1, '#ffffff')

      var gradient2 = ctx.createLinearGradient(10, 10, 400, 10)
      // 从 0.5 的位置才开始渐变
      gradient2.addColorStop(0.5, '#000000')
      gradient2.addColorStop(1, '#ffffff')

      // 设置
      ctx.beginPath()
      ctx.fillStyle = gradient1
      ctx.fillRect(10, 10, 400, 100)

      ctx.beginPath()
      ctx.fillStyle = gradient2
      ctx.fillRect(10, 150, 400, 100)
    </script>
  </body>
</html>

 -->

<!-- 

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const ctx = canvas.getContext('2d') // 获取绘制上下文
      ctx.strokeStyle = '#f00' // 描边样式设置为红色
      ctx.fillStyle = '#00f' // 填充样式设置为蓝色
      ctx.lineWidth = 5

      // 创建渐变
      // 结束坐标为点
      var gradient1 = ctx.createRadialGradient(100, 100, 100, 100, 100, 0)
      gradient1.addColorStop(0, '#000000')
      gradient1.addColorStop(1, '#ffffff')

      // 结束坐标为半径 30 的 圆
      var gradient2 = ctx.createRadialGradient(320, 100, 100, 320, 100, 30)
      gradient2.addColorStop(0, '#000000')
      gradient2.addColorStop(1, '#ffffff')

      // 从 0.5 的位置才开始渲染
      var gradient3 = ctx.createRadialGradient(100, 320, 100, 100, 320, 0)
      gradient3.addColorStop(0.5, '#000000')
      gradient3.addColorStop(1, '#ffffff')

      // 开始坐标和结束坐标不一样
      var gradient4 = ctx.createRadialGradient(320, 320, 100, 250, 250, 0)
      gradient4.addColorStop(0, '#000000')
      gradient4.addColorStop(1, '#ffffff')

      // 1
      ctx.beginPath()
      ctx.fillStyle = gradient1
      ctx.fillRect(10, 10, 200, 200)

      // 2
      ctx.beginPath()
      ctx.fillStyle = gradient2
      ctx.fillRect(220, 10, 200, 200)

      // 3
      ctx.beginPath()
      ctx.fillStyle = gradient3
      ctx.fillRect(10, 220, 200, 200)

      // 4
      ctx.beginPath()
      ctx.fillStyle = gradient4
      ctx.fillRect(220, 220, 200, 200)
    </script>
  </body>
</html>

  -->

<!-- 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas

      // 通过判断 getContext 方法是否存在来判断浏览器的支持性
      if (canvas.getContext) {
        // 获取绘图上下文
        var ctx = canvas.getContext('2d')
        // 创建一个 image 对象
        var img = new Image()
        ;(img.src = './logo.png'),
          (img.onload = function () {
            // 图片加载完以后
            // 创建图案
            var ptrn = ctx.createPattern(img, 'no-repeat')
            ctx.fillStyle = ptrn
            ctx.fillRect(0, 0, 500, 500)
          })
      }
    </script>
  </body>
</html>

   -->

<!-- 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <canvas id="canvas2" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
    <script>
      const canvas = document.getElementById('canvas') // 获取Canvas
      const canvas2 = document.getElementById('canvas2') // 获取Canvas

      // 通过判断 getContext 方法是否存在来判断浏览器的支持性
      if (canvas.getContext) {
        // 获取绘图上下文
        var ctx = canvas.getContext('2d')
        var ctx2 = canvas2.getContext('2d')

        // 创建一个 canvas 对象
        var img = new Image()
        img.src = './logo.png'
        img.onload = function () {
          // 图片加载完以后
          // 创建图案
          var ptrn = ctx.createPattern(img, 'repeat')
          ctx.fillStyle = ptrn
          ctx.fillRect(0, 0, 200, 200)

          // 用 canvas 来绘制 canvas2
          var ptrn2 = ctx2.createPattern(canvas, 'repeat')
          ctx2.fillStyle = ptrn2
          ctx2.fillRect(0, 0, 500, 500)
        }
      }
    </script>
  </body>
</html>

  
 -->
